<template>
  <h1>销售信息查询</h1>
  <el-table :data="saleInfoList" stripe>
    <el-table-column prop="clientName" label="客户名称"></el-table-column>
    <el-table-column prop="saleName" label="销售员"></el-table-column>
    <el-table-column prop="saleDate" label="销售时间"></el-table-column>
    <el-table-column prop="saleTotal" label="订单总额"></el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="viewInfo(scope.row.saleinfoId)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="curPage" v-model:page-size="pageSize" background
                 :total="total" @current-change="reload"></el-pagination>

  <el-dialog v-model="dialogVisible" title="采购信息详情" width="40%">
    <span>客户名称名称&nbsp;&nbsp;&nbsp;{{detailsList[0].clientName}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span>销售员&nbsp;&nbsp;&nbsp;{{detailsList[0].saleName}}</span><br>
    <span>销售日期&nbsp;&nbsp;&nbsp;{{detailsList[0].saleDate}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
    <span>订单金额&nbsp;&nbsp;{{detailsList[0].saleTotal}}</span><br>
    <span>出库物品明细</span>
    <el-table :data="detailsList">
      <el-table-column prop="goodsName" label="商品名称"></el-table-column>
      <el-table-column prop="goodsBrand" label="品牌"></el-table-column>
      <el-table-column prop="salePrice" label="成交价"></el-table-column>
      <el-table-column prop="saleNo" label="销售数量"></el-table-column>
    </el-table>
    <template #footer>
      <span class="dialog-footer">
       <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
    </template>
  </el-dialog>


  <div style="width: 150px;margin-left: 800px">
    <span>客户名称</span> <el-input v-model="findName"></el-input>
    <span>起始日期</span>
    <el-date-picker v-model="startDate" type="date" value-format="YYYY-MM-DD"
                    placeholder="请选择起始日期">
    </el-date-picker>
    <span>结束日期</span>
    <el-date-picker v-model="endDate" type="date" value-format="YYYY-MM-DD"
                    placeholder="请选择结束日期">
    </el-date-picker>
    <el-button type="primary" @click="reload">查询</el-button>
  </div>
</template>

<script>
import axios from "axios";

export default {
  created() {
    this.reload();
  },
  name: "SaleInfo",
  data(){
    return{
      saleInfoList:[],
      curPage:1,
      pageSize:4,
      total:0,
      detailsList:[],
      dialogVisible:false,
      findName:'',
      startDate:'',
      endDate:''
    }
  },
  methods:{
    viewInfo(saleInfoId){
      let param =new URLSearchParams();
      param.append("saleInfoId",saleInfoId);
      axios.post("/api/saleInfo/findBySaleInfoId",param).then(response=>{
        this.detailsList = response.data;
        this.dialogVisible = true;
      })
    },
    reload(){
      let param = {
        "pageNo" : this.curPage,
        "pageSize" : this.pageSize,
        "startDate" : this.startDate,
        "endDate" : this.endDate,
        "t" : {
          "clientName" : this.findName
        }
      }
      axios.post("/api/saleInfo/findSaleInfoByPage",param).then(response=>{
        let data = response.data;
        this.saleInfoList = data.records;
        this.curPage=data.current;
        this.total=data.total;
      })
    }
  }
}
</script>

<style scoped>

</style>